<template>
  <div class="admin-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="top">
        <div class="top-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="top-right">
          <!-- 重置  查询搜索 按钮 -->
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="queryList">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <!-- 头部表单元素 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="ruleFormRef"
        >
          <el-form-item label="广告名称" prop="name">
            <el-input
              v-model="formInline.name"
              placeholder="广告名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="广告位置" prop="type">
            <el-select v-model="formInline.type" placeholder="全部" clearable>
              <el-option label="PC首页轮播" value="0" />
              <el-option label="APP首页轮播" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="到期时间" prop="endTime">
            <el-date-picker
              v-model="formInline.endTime"
              type="date"
              placeholder="请选择时间"
              clearable
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <!-- v-if 根据 权限列表来显示  如果用户没有这个权限  将不显示添加按钮 -->
      <el-button @click="router.push('addAdvertise')">添加广告</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        table-layout="auto"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="广告名称" />
        <el-table-column label="广告位置">
          <template #default="{ row }">
            {{ row.type === 0 ? "PC首页轮播" : "App首页轮播" }}
          </template>
        </el-table-column>
        <el-table-column label="广告图片" width="200">
          <template #default="{ row }">
            <img :src="row.pic" alt="" style="width: 36%" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="时间" width="250">
          <template #default="{ row }">
            <div>
              开始时间:{{ dayjs(row.startTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
            <div>
              到期时间:{{ dayjs(row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上线/下线">
          <template #default="{ row }">
            <el-switch
              @click="ChangeStatus(row)"
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="clickCount" label="点击次数" />
        <el-table-column prop="orderCount" label="生成订单" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="toUpDataAd(row)"
              >编辑</el-button
            >
            <el-button link type="primary" size="small" @click="delTab(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <!-- 底下操作是否推荐 -->
      <el-select
        v-model="recommendVal"
        class="m-2"
        placeholder="批量操作"
        size="large"
      >
        <el-option
          v-for="item in recommendOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="hdCLlick">确定</el-button>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http";
import { ref, reactive } from "vue";
import { Search, Tickets } from "@element-plus/icons-vue";
import useTable from "@/hooks/components/useTable";
import { ElMessage, ElMessageBox, FormInstance, dayjs } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
// 选择的地下的批量操作
const recommendVal = ref();
const recommendOption = [
  {
    value: 3,
    label: "删除",
  },
];
// form的实例
const ruleFormRef = ref<FormInstance>();
// 头顶表单
const formInline = reactive({
  name: "",
  type: "",
  endTime: "",
});

const toUpDataAd = (row: any) => {
  // console.log(row);
  router.push({ path: "updateAdvertise", query: { id: row.id } });
};

const resetForm = () => {
  ruleFormRef.value?.resetFields();
};

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const {
  tableData,
  paginationParams,
  handleCurrentChange,
  handleSizeChange,
  queryList,
} = useTable(http.advertise.getAdvertiseList, formInline);

// 选中的
const multipleSelection = ref<number[]>([]);
// 多选
const handleSelectionChange = (val: BrandModel[]) => {
  // multipleSelection.value = val;
  multipleSelection.value = val.map((item: { id: number }) => item.id);
  // console.log(multipleSelection.value);
};

// 点击是否上线
const ChangeStatus = (row: any) => {
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.advertise
        .advUpdateStatus(row.id, row.status)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("更改成功");
            queryList();
          } else {
            row.status = row.status == 1 ? 0 : 1;
          }
        })
        .catch(() => {
          row.status = row.status == 1 ? 0 : 1;
          ElMessage.error("修改失败");
        });
    })
    .catch(() => {
      queryList();
      ElMessage.success("取消更改");
    });
};

// 多选
const hdCLlick = () => {
  if (recommendVal.value == 3) {
    ElMessageBox.confirm("是否要删除??", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        http.advertise.homeAdvertiseDel(multipleSelection.value).then((res) => {
          if (res.code === 200) {
            queryList();
            ElMessage.success(" 删除成功");
          }
        });
      })
      .catch(() => {});
  }
};

// 点击删除
const delTab = (id: number) => {
  const ids = [id];
  ElMessageBox.confirm("是否要删除??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.advertise.homeAdvertiseDel(ids).then((res) => {
        if (res.code === 200) {
          queryList();
          ElMessage.success(" 删除成功");
        }
      });
    })
    .catch(() => {});
};
</script>
<!-- 样式 -->
<style scoped lang="less">
.admin-container {
  background-color: #fff;

  // 搜索框
  .search-container {
    padding: 20px;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;
        align-items: center;

        span {
          margin-left: 15px;
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      width: 100%;
      margin-left: 8%;
      .el-input {
        width: 300px;
      }
    }
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 表格
  .table-container {
    :deep(.el-table__cell) {
      text-align: center;
      img {
        width: 60%;
      }
    }
  }

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>
